<!--
 * @Description:基础树
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-26 17:13:09
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-20 16:14:23
-->
<template>
  <div class="baseTree z-w-100">
    <el-tree
      ref="tree"
      v-clickoutside="handleClickOutside"
      :data="data"
      :props="props"
      :node-key="nodeKey"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultCheckedKeys"
      highlight-current
      :expand-on-click-node="false"
      :show-checkbox="showCheckbox"
      :default-expand-all="defaultExpandAll"
      @node-click="nodeClick"
      @check="checkFun"
    />
  </div>
</template>

<script>
import { findLastChildren } from './utils'
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  name: 'BaseTree',
  directives: { Clickoutside },
  props: {
    value: {
      type: [String, Number, Array],
      default: () => {
        return []
      }
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    props: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    isFirstShow: { // 是否第一列展开
      type: Boolean,
      default: true
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    isClickOutSide: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      defaultExpandedKeys: [],
      defaultCheckedKeys: []
    }
  },
  watch: {
    data (nVal) {
      if (nVal.length > 0) {
        this.$nextTick(() => {
          this.handleIsFirstShow() // 设置第一个展开
          this.setDefaultValue() // 设置默认值
        })
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.handleIsFirstShow() // 设置第一个展开
      this.setDefaultValue() // 设置默认值
    })
  },
  methods: {
    setCurrentKey (data) {
      this.$refs.tree.setCurrentKey(data)
    },
    handleClickOutside (e) {
      if (this.isClickOutSide) {
        this.$refs.tree.setCurrentKey(null)
        this.$emit('treeClick', { data: null, node: null })
      }
    },
    // 多选框选中
    checkFun (data, nodes) {
      this.$emit('input', nodes.checkedNodes)
    },
    // 获取选中树的数据
    getCheckedNodes () {
      const nodeData = this.$refs.tree.getCheckedNodes()
      const halfData = this.$refs.tree.getHalfCheckedNodes()
      return [...nodeData, ...halfData]
    },
    setDefaultValue () {
      if (this.showCheckbox) {
        if (!Array.isArray(this.value)) {
          throw new Error('多选请传递数组类型!')
        }
        this.$refs.tree.setCheckedNodes(this.value)
      } else {
        this.$refs.tree.setCurrentKey(this.value)
      }
    },
    nodeClick (data, node) {
      this.$emit('treeClick', { data, node })
    },
    handlClick (data, node) {
      this.$emit('treeClick', { data, node })
    },
    handleIsFirstShow () {
      if (this.isFirstShow && this.data.length > 0) {
        const target = this.data[0]
        const result = findLastChildren(this.data, target[this.nodeKey], [], 'depId')
        if (result.length > 0) {
          this.defaultExpandedKeys.push(result[0][this.nodeKey])
          this.$refs.tree.setCurrentKey(result[0][this.nodeKey])
          const cNode = this.$refs.tree.getNode(result[0][this.nodeKey])
          this.handlClick(result[0], cNode)
        }
      }
    }
  }
}
</script>

<style>

</style>
